<template>
    <div>
        <div class="chart" style="height:600px;width:1200px"   :key="index" id="chart" ref="chart"></div>
    </div>
</template>
<script>
export default {
    
    props:{
        option: {
        type: Object,
        default (){
            return {}
        }
        }
    },
    data() {
        return {}
    },
    mounted(){
        this.init()
    },
    watch: {
 
  //观察option的变化
 
  option: {
 
   handler(newVal, oldVal) {
 
    if (this.chart) {
     if (newVal) {
      this.chart.setOption(newVal);
     } else {
      this.chart.setOption(oldVal);
     }
    } else {
      this.init();
    }
   },
   deep: true //对象内部属性的监听，关键。
  }
 },
    methods: {
        init(){
              myChart.setOption({
            title: {text: nameList[key],subtext:'',left: 'center' },
            color:[  '#e10b0b',"#0090FF","#EE8931","#8B5CFF"],
            legend: {
                data: [ '湿度', '辅助设备温度','室外温度', '温差'],
                top: 'top',
                left: '60%',
            },
            tooltip: {
              show :true,
            trigger: 'axis',
            backgroundColor: '#ffffff',
            borderWidth: 1,
            
            textStyle: {
                color: '#000',
            },
        },
          toolbox: {
              feature: {
                  dataView: {show: true, readOnly: false},
                  magicType: {show: true, type: ['line','bar']},
                  restore: {show: true},
                  saveAsImage: {show: true}
              }
          },
          xAxis: [
              {
                  type: 'category',
                  data: ele_time,
                  axisPointer: {
                      type: 'shadow'
                  }
              }
          ],
          yAxis: [
            {
                type: 'value',
                name: '温度',
                min: -10,
                max: 70,
                interval: 10,
                
              axisLabel: {
                  formatter: '{value}(摄氏度)'
              }
            },
            {
                type: 'value',
                name: '湿度',
                min: 0,
                max: 80,
                interval: 10,
                axisLabel: {
                    formatter: '{value}%'
                }
            }
          ],
          series: [
            {
                  name: '湿度',
                  type: 'line',
                  yAxisIndex: 1,
                  smooth: true,
                  data: humidity,
                  showAllSymbol: true,
                  symbol: 'circle',
                  symbolSize: 10,
                  smooth: true, //是否平滑
                  itemStyle: {
                        color: '#00b3f4',
                        borderColor: '#fff',
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 2,
                        shadowOffsetX: 2,
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#00b3f4',
                        },
                    },
                  markPoint: {
                symbol: 'pin', //标记(气泡)的图形
                symbolSize: 50, //标记(气泡)的大小
                itemStyle: {
                    // color: '#4587E7', //图形的颜色。
                    borderColor: '#000', //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
                    borderWidth: 0, //描边线宽。为 0 时无描边。
                    borderType: 'solid', //柱条的描边类型，默认为实线，支持 ‘solid’, ‘dashed’, ‘dotted’。
                },
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' },
                ],
            },
            markLine: {
                data: [{ type: 'average', name: '平均值' }],
            },
              },
              {
                  name: '辅助设备温度',
                  type: 'line',
                  yAxisIndex: 0,
                  smooth: true,
                  data: temperature,
                  showAllSymbol: true,
                  symbol: 'circle',
                  symbolSize: 10,
                  smooth: true, //是否平滑
                  itemStyle: {
                        color: '#e76c00',
                        borderColor: '#fff',
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 2,
                        shadowOffsetX: 2,
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#e76c00',
                        },
                    },
                  markPoint: {
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    data: [{
                        type: 'max',
                        name: '最大值',

                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                  },
              },
              {
                  name: '室外温度',
                  type: 'line',
                  yAxisIndex: 0,
                  smooth: true,
                  data: outTemp,
                  showAllSymbol: true,
                  symbol: 'circle',
                  symbolSize: 10,
                  smooth: true, //是否平滑
                  itemStyle: {
                        color: '#00d784',
                        borderColor: '#fff',
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 2,
                        shadowOffsetX: 2,
                    },
                    label: {
                        show: true,
                        position: 'bottom',
                        textStyle: {
                            color: '#00d784',
                        },
                    },
                  markPoint: {
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    data: [{
                        type: 'max',
                        name: '最大值',

                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                  },
              },
              {
                  name: '温差',
                  type: 'bar',
                  yAxisIndex: 0,
                  smooth: true,
                  data: TempDiff,
                  stack: '总量',
                  barMaxWidth: 20,
                  label: {
                      show: true,
                      position: 'inside'
                  }
              },
              
          ]
       
       });
          
         
        }
    }
}
</script>